الدرس التاسع / إضافة صفحة معجبيك على الفيس بوك + أزرار مواقع التواصل الاجتماعي

درسنا اليوم يتكون من نقطتين فقط
واليوم بإذن الله سنقوم لأول مرة في الدورة بالقيام بتعديل بسيط على قالب المدونة نفسه
وإن شاء الله يكون درس سهل التطبيق

سنضيف صفحتك على الفيس بوك كصفحة منتدانا مثلا والمستخدمة في الشرح
+
أزرار مواقع التواصل الاجتماعي كتويتر والفيس بوك وجوجل بلس وغيرها وزر الطباعة أيضا مما يحسن من نسبة الزيارات


أولا : صندوق معجبي صفحة الفيس بوك بشكل فلاشي متحرك

اذهبي للوحة تحكم مدونتك ومنها اختاري تبويب قالب
قبل البدء في التعديل على القالب قومي بتنزيل نسخة منه لتلافي حدوث أي أخطاء أثناء التعديل بالضغط على زر نسخ احتياطي / استعادة






تظهر نافذة اضغطي فيها على تنزيل النموذج الكامل






واحفظي نسخة من القالب في أي مكان على جهازك .. هكذا عند حدوث خطأ في التعديل على القالب يمكنك رفع هذه النسخة مرة أخرى كما سبق وشرحنا واستعادة قالبك كما هو

من تبويب قالب اضغطي على تحرير HTML





ستفتح معك نافذة تحتوي على أكواد القالب كلها
اضغطي فيها على مربع .. توسيع قوالب عناصر واجهة المستخدم ..






ابحثي عن الكود التالي </head> بالضغط على ctrl + F من لوحة المفاتيح واكتبي الكود ليبحث في القالب عنه

بعد ما تجديه قومي بإضافة الكود التالي فوقه / أعلاه مباشرة

[BACKGROUND="60 #CCFFFF"]

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

[/BACKGROUND]


ثم اضغطي حفظ النموذج
أغلقي صفحة التحرير واذهبي لتبويب التخطيط
واضغطي على إضافة أداة






اختاري أداة HTML / JavaScript






وضعي بداخلها الكود التالي ..

[BACKGROUND="60 #CCFFFF"]

<script src='http://egymodern.googlecode.com/files/facebooklike-box.js' type='text/javascript'></script>
<style type="text/css">
.w2bslikebox{background: url("http://3.bp.blogspot.com/-mhGi20Pv8vk/TsZ6OzrfKNI/AAAAAAAACmk/d84HD-0_QDk/s1600/facebook-page12.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style>

<div class="w2bslikebox" style="z-index: 9999999999;">
<div>

<iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/pages/%D9%85%D9%86%D8%AA%D8%AF%D9%8A%D8%A7%D8%AA-%D8%B9%D8%B1%D9%88%D8%B3/318713243020&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="z-index: 9999999999; border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;">
</iframe>

</div>
<script type="text/javascript">
writeHTMLasJS();
</script>
</div>

[/BACKGROUND]

يمكنك استبدال رابط صفحة المنتدى على الفيس بوك برابط صفحتك إن كنت تمتلكين واحدة أو وضع الكود كما هو على سبيل التجربة ( رابط الصفحة المحدد بالأحمر )







ثم احفظي الأداة وحركيها لمكان مناسب واحفظي الترتيب لتظهر على مدونتك هكذا






وعند الوقوف عليها







وهذا شرح بالفيديو لتوضيح الاضافة بتفصيل أكبر


[YOUTUBE]zu8BTf3KxIE[/YOUTUBE]


_________________________________________


ثانيا : إضافة أزرار مواقع التواصل وزر الطباعة

هذه الاضافة سهلة جدا ولا تأخذ أي وقت
عليك أولا الذهاب للموقع التالي

AddThis

اختاري الشكل الذي تفضلينه للأزرار وحددي منصة بلوجر ثم اضغطي Install Blogger Widget






ستفتح نافذة جديدة اضغطي فيها على .. إضافة عنصر واجهة مستخدم ..






ستظهر الأداة في التخطيط ,, حركيها أسفل رسائل المدونة ثم احفظي الترتيب






استعرضيها على مدونتك حيث تظهر أسفل كل تدوينة







وهكذا انتهى درسنا لليوم

واجب الدرس ..

إضافة الأدوات المشروحة في الدرس لمدونتك


استفسارات الدرس التاسع